<template>
  <li
    :key="comment.id"
    :id="getCommentElementId(comment.id)"
    :class="{ mobile: isMobile }"
    class="comment-item"
  >
    <div class="cm-avatar">
      <comment-link class="link" :href="comment.author.site">
        <img
          :alt="comment.author.name"
          :src="getGravatarByEmail(comment.author.email)"
          draggable="false"
        />
      </comment-link>
    </div>
    <div class="cm-body">
      <div class="cm-header">
        <comment-link
          class="user-name"
          :href="comment.author.site"
        >{{ firstUpperCase(comment.author.name) }}</comment-link>
        <comment-ua v-if="comment.agent" :ua="comment.agent" />
        <span v-if="comment.ip_location" class="location">
          <span>{{ comment.ip_location.country }}</span>
          <span v-if="comment.ip_location.country && comment.ip_location.city" class="separator">-</span>
          <span>{{ comment.ip_location.city }}</span>
        </span>
        <span class="flool">#{{ comment.id }}</span>
      </div>
      <div class="cm-content">
        <p v-if="comment.parent" class="reply">
          <span class="text">
            <span>回复</span>
          </span>
          <button
            class="parent"
            @click="scrollToCommentItem(comment.parent)"
          >{{ getReplyParentCommentText(comment.parent) }}</button>
        </p>
        <div class="markdown-html comment" v-html="markdownToHTML(comment.content)" />
      </div>
      <div class="cm-footer">
        <span class="create_at">{{ timeAgo(comment.create_at) }}</span>
        <button class="reply" @click="replyComment(comment.id)">
          <i class="iconfont icon-reply" />
          <span>回复</span>
        </button>
        <button
          class="like"
          :class="{ liked: liked, actived: Boolean(comment.likes) }"
          :disabled="liked"
          @click="likeComment(comment.id)"
        >
          <i class="iconfont icon-zan" />
          <span>赞</span>
          <span>({{ comment.likes }})</span>
        </button>
      </div>
    </div>
  </li>
</template>

<script>
import { defineComponent, h, computed } from "vue";
import { useEnhandle } from "@/enhandle";
import { markdownToHTML } from "@/transforms/markdown";
import { timeAgo } from "@/transforms/moment";
import { getGravatarByEmail } from "@/transforms/gravatar";
import { firstUpperCase } from "@/transforms/text";
import { scrollToElementAnchor, getCommentElementId } from "@/utils/scroller";
import CommentUa from "./ua.vue"

const CommentLink = defineComponent({
  props: {
    href: String
  },
  setup(props, context) {
    return () => {
      const { href, ...restProps } = props
      const isLink = !!href
      return h(
        isLink ? 'a' : 'span',
        !isLink ? restProps : {
          ...props,
          target: '_blank',
          rel: 'external nofollow noopener'
        },
        context.slots.default?.()
      )
    }
  }
})

export default defineComponent({
  name: 'CommentListItem',
  components: {
    CommentLink,
    CommentUa,
  },
  props: {
    comment: {
      type: Object,
      required: true
    },
    liked: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const { store, isMobile } = useEnhandle()
    const comments = computed(() => store.state.comment.comments.data)

    const getReplyParentCommentText = (parentCommentId) => {
      const authorName = comments.value
        .find(comment => comment.id === parentCommentId)
        ?.author.name
      const nameText = authorName ? `@${authorName}` : ''
      const idText = `#${parentCommentId}`
      return `${idText} ${nameText}`
    }

    const replyComment = (commentId) => {
      context.emit("reply", commentId)
    }

    const likeComment = (commentId) => {
      context.emit("like", commentId)
    }

    const scrollToCommentItem = (commentId) => {
      scrollToElementAnchor(getCommentElementId(commentId), -300)
    }

    return {
      isMobile,
      timeAgo,
      getGravatarByEmail,
      getCommentElementId,
      getReplyParentCommentText,
      firstUpperCase,
      markdownToHTML,
      replyComment,
      likeComment,
      scrollToCommentItem
    }
  }
})
</script>

<style lang="scss" scoped>
.comment-item {
  position: relative;
  padding-left: 2rem;
  margin-top: $lg-gap;
  &:first-child {
    margin-top: 0;
  }

  .cm-avatar {
    display: block;
    position: absolute;
    left: 0;
    top: $gap * 2;
    background-color: $module-bg-darker-2;

    .link {
      $size: 4.8rem;
      display: block;
      border: 5px solid $module-bg-lighter;
      border-radius: $mini-radius;
      width: $size;
      height: $size;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .cm-body {
    display: block;
    width: 100%;
    height: 100%;
    padding: $sm-gap $sm-gap $sm-gap ($lg-gap * 3);
    background-color: $module-bg-darker-1;
    @include radius-box($xs-radius);
    @include background-transition();

    > .cm-header {
      display: block;
      position: relative;

      > .user-name {
        font-weight: bold;
        margin-right: $gap;

        &:hover {
          border-bottom: 1px solid;
        }
      }

      ::v-deep(.os),
      ::v-deep(.browser),
      .location {
        color: $text-disabled;
        font-size: $font-size-small;
        margin-right: $gap;

        .iconfont {
          margin-right: $xs-gap;
        }

        .separator {
          margin: 0 $xs-gap;
        }
      }

      > .flool {
        float: right;
        line-height: 1.8;
        color: $text-dividers;
        font-size: $font-size-small;
        font-weight: bold;
      }
    }

    > .cm-content {
      padding-right: $xs-gap;
      user-select: text;
      font-size: $font-size-h6;

      .reply {
        display: flex;
        align-items: center;
        margin-top: $sm-gap;
        margin-bottom: -$xs-gap;
        color: $text-disabled;
        font-weight: bold;

        .text {
          margin-right: $xs-gap;
        }

        .parent {
          font-weight: bold;
          color: $link-color;
          &:hover {
            color: $link-color-hover;
          }
        }
      }

      .markdown-html {
        margin: $sm-gap 0;
      }
    }

    > .cm-footer {
      display: flex;

      > .create_at,
      > .reply,
      > .like {
        color: $text-disabled;
        font-size: $font-size-small;
        margin-right: $gap;

        .iconfont {
          margin-right: $xs-gap;
        }
      }

      .reply {
        &:hover {
          color: $link-color;
        }
      }

      .like {
        &:hover {
          color: $red;
        }
        &.liked {
          color: $red;
          font-weight: bold;
        }
        &.actived {
          font-weight: bold;
        }
      }
    }
  }

  &:hover {
    .cm-body {
      background-color: $module-bg-darker-3;
    }
  }

  &.mobile {
    padding: 0;
    margin-top: $gap;

    .cm-body {
      padding: $sm-gap $gap;
    }
  }
}
</style>
